<template>
  <div id="HelloWorld">
    <div class="lottery">
      <div class="center">
        <!-- <div class="title">往期开奖结果</div>
        <div class="prizeNumber">
          <table border="1" width=100% cellspacing=0 rules=rows frame=void>
            <tr>
              <th width=20%>期号</th>
              <th width=30%>开奖时间</th>
              <th width=50%>开奖号码</th>
            </tr>
            <tr v-for="(item1,key,index) in prizeNumber" :key="index">
              <td width=20%>{{key}}</td>
              <td width=30%>{{item1.dateline}}</td>
              <td width=50%>
                <span v-for="item2 in item1.number.split(',')" :key="item2">{{item2}}</span>
              </td>
            </tr>
          </table>
        </div> -->
        <div class="title">推荐号码</div>
        <div class="tuijian">
          <div class="boxnum">第一组：<span v-for="item3 in tuijian1.split(',')" :key="item3">{{item3}}</span></div>
          <div class="boxnum">第二组：<span v-for="item4 in tuijian2.split(',')" :key="item4">{{item4}}</span></div>
          <div class="boxnum">第三组：<span v-for="item5 in tuijian3.split(',')" :key="item5">{{item5}}</span></div>
        </div>
        <div class="title">基础号码</div>
        <div class="title base">
          基础号码
          <span v-for="item in base" :key="item">{{item}}</span>
        </div>
        <!-- 第一部分 -->
        <div class="select">
          <!-- 一号胆 -->
          <div class="box1">
            <div class="left">
              <div class="dan">一号胆</div>
              <div>
                <span
                  :class="{active: one1.select}"
                  @click="oneAcitve1(index)"
                  v-for="(one1,index) in numOne1"
                  :key="index"
                >{{one1.num}}</span>
              </div>
              <div class="qing" @click="oneEmpty1">清空</div>
              <div class="all" @click="allSelect1">
                <input type="checkbox" v-model="checked1">全选
              </div>
            </div>
            <div class="left right">
              <div class="chu">出现</div>
              <div>
                <span
                  :class="{active: one2.select}"
                  @click="oneAcitve2(index)"
                  v-for="(one2,index) in numOne2"
                  :key="index"
                >{{one2.num}}</span>
              </div>
              <div class="qing" @click="oneEmpty2">清空</div>
            </div>
          </div>
          <!-- 二号胆 -->
          <div class="box1">
            <div class="left">
              <div class="dan">二号胆</div>
              <div>
                <span
                  :class="{active: one1.select}"
                  @click="twoAcitve1(index)"
                  v-for="(one1,index) in numTwo1"
                  :key="index"
                >{{one1.num}}</span>
              </div>
              <div class="qing" @click="twoEmpty1">清空</div>
              <div class="all" @click="allSelect2">
                <input type="checkbox" v-model="checked2">全选
              </div>
            </div>
            <div class="left right">
              <div class="chu">出现</div>
              <div>
                <span
                  :class="{active: one2.select}"
                  @click="twoAcitve2(index)"
                  v-for="(one2,index) in numTwo2"
                  :key="index"
                >{{one2.num}}</span>
              </div>
              <div class="qing" @click="twoEmpty2">清空</div>
            </div>
          </div>
          <!-- 三号胆 -->
          <div class="box1">
            <div class="left">
              <div class="dan">三号胆</div>
              <div>
                <span
                  :class="{active: one1.select}"
                  @click="threeAcitve1(index)"
                  v-for="(one1,index) in numThree1"
                  :key="index"
                >{{one1.num}}</span>
              </div>
              <div class="qing" @click="threeEmpty1">清空</div>
              <div class="all" @click="allSelect3">
                <input type="checkbox" v-model="checked3">全选
              </div>
            </div>
            <div class="left right">
              <div class="chu">出现</div>
              <div>
                <span
                  :class="{active: one2.select}"
                  @click="threeAcitve2(index)"
                  v-for="(one2,index) in numThree2"
                  :key="index"
                >{{one2.num}}</span>
              </div>
              <div class="qing" @click="threeEmpty2">清空</div>
            </div>
          </div>
          <!-- 四号胆 -->
          <div class="box1">
            <div class="left">
              <div class="dan">四号胆</div>
              <div>
                <span
                  :class="{active: one1.select}"
                  @click="fourAcitve1(index)"
                  v-for="(one1,index) in numFour1"
                  :key="index"
                >{{one1.num}}</span>
              </div>
              <div class="qing" @click="fourEmpty1">清空</div>
              <div class="all" @click="allSelect4">
                <input type="checkbox" v-model="checked4">全选
              </div>
            </div>
            <div class="left right">
              <div class="chu">出现</div>
              <div>
                <span
                  :class="{active: one2.select}"
                  @click="fourAcitve2(index)"
                  v-for="(one2,index) in numFour2"
                  :key="index"
                >{{one2.num}}</span>
              </div>
              <div class="qing" @click="fourEmpty2">清空</div>
            </div>
          </div>
          <!-- 五号胆 -->
          <div class="box1">
            <div class="left">
              <div class="dan">五号胆</div>
              <div>
                <span
                  :class="{active: one1.select}"
                  @click="fiveAcitve1(index)"
                  v-for="(one1,index) in numFive1"
                  :key="index"
                >{{one1.num}}</span>
              </div>
              <div class="qing" @click="fiveEmpty1">清空</div>
              <div class="all" @click="allSelect5">
                <input type="checkbox" v-model="checked5">全选
              </div>
            </div>
            <div class="left right">
              <div class="chu">出现</div>
              <div>
                <span
                  :class="{active: one2.select}"
                  @click="fiveAcitve2(index)"
                  v-for="(one2,index) in numFive2"
                  :key="index"
                >{{one2.num}}</span>
              </div>
              <div class="qing" @click="fiveEmpty2">清空</div>
            </div>
          </div>
        </div>
        <!-- 第二部分 -->
        <div class="double">
          <div>
            <div class="shuzi">
              <div class="oushu">
                偶数个数
                <span
                  :class="{active: one2.select}"
                  @click="oushu1(index)"
                  v-for="(one2,index) in oushu"
                  :key="index"
                >{{one2.num}}</span>
              </div>
              <div class="heshu">
                合数个数
                <span
                  :class="{active: one2.select}"
                  @click="heshu1(index)"
                  v-for="(one2,index) in heshu"
                  :key="index"
                >{{one2.num}}</span>
              </div>
            </div>
            <div class="shuzi">
              <div class="oushu">
                小数个数
                <span
                  :class="{active: one2.select}"
                  @click="xiaoshu1(index)"
                  v-for="(one2,index) in xiaoshu"
                  :key="index"
                >{{one2.num}}</span>
              </div>
              <div class="heshu">
                连号个数
                <span
                  :class="{active: one2.select}"
                  @click="lianhao1(index)"
                  v-for="(one2,index) in lianhao"
                  :key="index"
                >{{one2.num}}</span>
              </div>
            </div>
          </div>
          <div class="qing" @click="allEmpty">清空</div>
        </div>
        <div class="produce">
          <button @click="produceNum">生成号码</button>
        </div>
        <div class="number">
          <div class="title">
            <div>号码/共{{number}}注</div>
            <button @click="clone_code" class="copy" data-clipboard-target="#clone">复制</button>
          </div>
          <div class="content">
            <div id="clone">
              <p v-for="(item,index) in content" :key="index">{{item}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Clipboard from "clipboard";
export default {
  name: "HelloWorld",
  data() {
    return {
      content: [],
      prizeNumber: {},
      tuijian1:'',
      tuijian2:'',
      tuijian3:'',
      number: '0',
      active: "-1",
      checked1: false,
      checked2: false,
      checked3: false,
      checked4: false,
      checked5: false,
      anum: 0,
      bnum: 0,
      cnum: 0,
      dnum: 0,
      enum: 0,
      base: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11"],
      numOne1: [
        { num: "01", select: false },
        { num: "02", select: false },
        { num: "03", select: false },
        { num: "04", select: false },
        { num: "05", select: false },
        { num: "06", select: false },
        { num: "07", select: false },
        { num: "08", select: false },
        { num: "09", select: false },
        { num: "10", select: false },
        { num: "11", select: false }
      ],
      numOne2: [
        { num: "0", select: false },
        { num: "1", select: false },
        { num: "2", select: false },
        { num: "3", select: false },
        { num: "4", select: false },
        { num: "5", select: false }
      ],
      numTwo1: [
        { num: "01", select: false },
        { num: "02", select: false },
        { num: "03", select: false },
        { num: "04", select: false },
        { num: "05", select: false },
        { num: "06", select: false },
        { num: "07", select: false },
        { num: "08", select: false },
        { num: "09", select: false },
        { num: "10", select: false },
        { num: "11", select: false }
      ],
      numTwo2: [
        { num: "0", select: false },
        { num: "1", select: false },
        { num: "2", select: false },
        { num: "3", select: false },
        { num: "4", select: false },
        { num: "5", select: false }
      ],
      numThree1: [
        { num: "01", select: false },
        { num: "02", select: false },
        { num: "03", select: false },
        { num: "04", select: false },
        { num: "05", select: false },
        { num: "06", select: false },
        { num: "07", select: false },
        { num: "08", select: false },
        { num: "09", select: false },
        { num: "10", select: false },
        { num: "11", select: false }
      ],
      numThree2: [
        { num: "0", select: false },
        { num: "1", select: false },
        { num: "2", select: false },
        { num: "3", select: false },
        { num: "4", select: false },
        { num: "5", select: false }
      ],
      numFour1: [
        { num: "01", select: false },
        { num: "02", select: false },
        { num: "03", select: false },
        { num: "04", select: false },
        { num: "05", select: false },
        { num: "06", select: false },
        { num: "07", select: false },
        { num: "08", select: false },
        { num: "09", select: false },
        { num: "10", select: false },
        { num: "11", select: false }
      ],
      numFour2: [
        { num: "0", select: false },
        { num: "1", select: false },
        { num: "2", select: false },
        { num: "3", select: false },
        { num: "4", select: false },
        { num: "5", select: false }
      ],
      numFive1: [
        { num: "01", select: false },
        { num: "02", select: false },
        { num: "03", select: false },
        { num: "04", select: false },
        { num: "05", select: false },
        { num: "06", select: false },
        { num: "07", select: false },
        { num: "08", select: false },
        { num: "09", select: false },
        { num: "10", select: false },
        { num: "11", select: false }
      ],
      numFive2: [
        { num: "0", select: false },
        { num: "1", select: false },
        { num: "2", select: false },
        { num: "3", select: false },
        { num: "4", select: false },
        { num: "5", select: false }
      ],
      oushu: [
        { num: "0", select: false },
        { num: "1", select: false },
        { num: "2", select: false },
        { num: "3", select: false },
        { num: "4", select: false },
        { num: "5", select: false }
      ],
      heshu: [
        { num: "0", select: false },
        { num: "1", select: false },
        { num: "2", select: false },
        { num: "3", select: false },
        { num: "4", select: false },
        { num: "5", select: false }
      ],
      xiaoshu: [
        { num: "0", select: false },
        { num: "1", select: false },
        { num: "2", select: false },
        { num: "3", select: false },
        { num: "4", select: false },
        { num: "5", select: false }
      ],
      lianhao: [
        { num: "0", select: false },
        { num: "1", select: false },
        { num: "2", select: false },
        { num: "3", select: false },
        { num: "4", select: false },
        // { num: "5", select: false }
      ]
    };
  },
  watch: {
    numOne1: {
      handler(newVal, oldVal) {
        this.checked1 = newVal.every((item, index, array) => {
          return item.select == true;
        });
      },
      deep: true
    },
    numTwo1: {
      handler(newVal, oldVal) {
        this.checked2 = newVal.every((item, index, array) => {
          return item.select == true;
        });
      },
      deep: true
    },
    numThree1: {
      handler(newVal, oldVal) {
        this.checked3 = newVal.every((item, index, array) => {
          return item.select == true;
        });
      },
      deep: true
    },
    numFour1: {
      handler(newVal, oldVal) {
        this.checked4 = newVal.every((item, index, array) => {
          return item.select == true;
        });
      },
      deep: true
    },
    numFive1: {
      handler(newVal, oldVal) {
        this.checked5 = newVal.every((item, index, array) => {
          return item.select == true;
        });
      },
      deep: true
    }
  },
  mounted() {
    // this.openmes();//往期开奖
    this.tuijianNum();
    setInterval(()=>{
      this.openmes();
    },600000);
    var copybtn = document.getElementsByClassName("btn");
    this.clipboard = new Clipboard(copybtn);
  },
  methods: {
    // 生成号码
    produceNum() {
      const a1 = [];
      const b1 = [];
      const a2 = [];
      const b2 = [];
      const a3 = [];
      const b3 = [];
      const a4 = [];
      const b4 = [];
      const a5 = [];
      const b5 = [];
      const a6 = [];
      const b6 = [];
      const a7 = [];
      const b7 = [];
      this.numOne1.forEach(element => {
        if (element.select) {
          a1.push(element.num);
        }
      });
      this.numOne2.forEach(element => {
        if (element.select) {
          b1.push(element.num);
        } else {
          b1.push('');
        }
      });
      this.numTwo1.forEach(element => {
        if (element.select) {
          a2.push(element.num);
        }
      });
      this.numTwo2.forEach(element => {
        if (element.select) {
          b2.push(element.num);
        } else {
          b2.push('');
        }
      });
      this.numThree1.forEach(element => {
        if (element.select) {
          a3.push(element.num);
        }
      });
      this.numThree2.forEach(element => {
        if (element.select) {
          b3.push(element.num);
        } else {
          b3.push('');
        }
      });
      this.numFour1.forEach(element => {
        if (element.select) {
          a4.push(element.num);
        }
      });
      this.numFour2.forEach(element => {
        if (element.select) {
          b4.push(element.num);
        } else {
          b4.push('');
        }
      });
      this.numFive1.forEach(element => {
        if (element.select) {
          a5.push(element.num);
        }
      });
      this.numFive2.forEach(element => {
        if (element.select) {
          b5.push(element.num);
        } else {
          b5.push('');
        }
      });
      this.oushu.forEach(element => {
        if (element.select) {
          a6.push(element.num);
        } else {
          a6.push('');
        }
      });
      this.heshu.forEach(element => {
        if (element.select) {
          b6.push(element.num);
        } else {
          b6.push('');
        }
      });
      this.xiaoshu.forEach(element => {
        if (element.select) {
          a7.push(element.num);
        } else {
          a7.push('');
        }
      });
      this.lianhao.forEach(element => {
        if (element.select) {
          b7.push(element.num);
        } else {
          b7.push('');
        }
      });
      // console.log(a1);
      // console.log(b1);
      // console.log(a2);
      // console.log(b2);
      // console.log(a3);
      // console.log(b3);
      // console.log(a4);
      // console.log(b4);
      // console.log(a5);
      // console.log(b5);
      // console.log(a6);
      // console.log(b6);
      // console.log(a7);
      // console.log(b7);

    const jsonValue =  {
            a1: a1,
            b1: b1,
            a2: a2,
            b2: b2,
            a3: a3,
            b3: b3,
            a4: a4,
            b4: b4,
            a5: a5,
            b5: b5,
            a6: a6,
            b6: b6,
            a7: a7,
            b7: b7
      }
      this.axios
        .post("http://xuanhaoqi.gotoip55.com/shaixuan.ashx", {
          "tiaojian" :  JSON.stringify(jsonValue)
        })
        .then(({data}) => {
          // console.log(data);
          const jsonData = '{'+data+'}';
          const obj = JSON.parse(jsonData);
          if (obj.isSuccess) {
            // 逗号变成空格
            // const str = data.Msg.replace(/,/g, " ");
            // 分割成数组
            const arr = obj.Msg.split('|');
            this.content = arr;
            this.number = arr.length - 1;
          } else {
            this.$bus.$emit("toast", obj.Msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 上期开奖

    openmes(){
      this.prizeNumber={};
      this.axios.post("http://xuanhaoqi.gotoip55.com/wangqikaijiang.ashx")
        .then(({data}) => {
          // console.log(data);
          this.prizeNumber = data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },

    // 推荐号码
    tuijianNum(){
      this.axios
        .post("http://xuanhaoqi.gotoip55.com/suijituijian.ashx")
        .then(({data}) => {
          // console.log(data);
          const jsonData1 = '{'+data+'}';
          const obj1 = JSON.parse(jsonData1);
          // console.log(obj1);
          if (obj1.isSuccess=="true") {
            this.tuijian1=obj1.diyizu;
            this.tuijian2=obj1.dierzu;
            this.tuijian3=obj1.disanzu;
          } else {
            this.$bus.$emit("toast", obj.Msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    oneAcitve1(index) {
      this.numOne1[index].select = !this.numOne1[index].select;
      this.numOne2.forEach(element => {
        element.select = false;        
      });
    },
    oneAcitve2(index) {
      this.anum = 0;
      this.numOne1.forEach((element,index,arr) => {
        if (element.select) {
          this.anum++;
        }
      });
      if(this.anum<(this.numOne2[index].num)){
        this.numOne2[index].select = false;
      } else {
        this.numOne2[index].select = !this.numOne2[index].select;
      }
      if(this.numOne2[index].num=='0') {
        this.numOne2.forEach(element => {
          element.select = false;        
        });
        this.numOne2[0].select=!this.numOne2[0].select;
      } else {
        this.numOne2[0].select=false;
      }
    },
    oneEmpty1() {
      this.numOne1.forEach(element => {
        element.select = false;
      });
    },
    oneEmpty2() {
      this.numOne2.forEach(element => {
        element.select = false;
      });
    },
    allSelect1() {
      if (this.checked1) {
        this.numOne1.forEach(element => {
          element.select = false;
        });
      } else {
        this.numOne1.forEach(element => {
          element.select = true;
        });
      }
    },
    // 二号胆
    twoAcitve1(index) {
      this.numTwo1[index].select = !this.numTwo1[index].select;
      this.numTwo2.forEach(element => {
        element.select = false;        
      });
    },
    twoAcitve2(index) {
      this.bnum = 0;
      this.numTwo1.forEach((element,index,arr) => {
        if (element.select) {
          this.bnum++;
        }
      });
      if(this.bnum<(this.numTwo2[index].num)){
        this.numTwo2[index].select = false;
      } else {
        this.numTwo2[index].select = !this.numTwo2[index].select;
      }
      if(this.numTwo2[index].num=='0') {
        this.numTwo2.forEach(element => {
          element.select = false;        
        });
        this.numTwo2[0].select=!this.numTwo2[0].select;
      } else {
        this.numTwo2[0].select=false;
      }
    },
    twoEmpty1() {
      this.numTwo1.forEach(element => {
        element.select = false;
      });
    },
    twoEmpty2() {
      this.numTwo2.forEach(element => {
        element.select = false;
      });
    },
    allSelect2() {
      if (this.checked2) {
        this.numTwo1.forEach(element => {
          element.select = false;
        });
      } else {
        this.numTwo1.forEach(element => {
          element.select = true;
        });
      }
    },
    // 三号胆
    threeAcitve1(index) {
      this.numThree1[index].select = !this.numThree1[index].select;
      this.numThree2.forEach(element => {
        element.select = false;        
      });
    },
    threeAcitve2(index) {
      this.cnum = 0;
      this.numThree1.forEach((element,index,arr) => {
        if (element.select) {
          this.cnum++;
        }
      });
      if(this.cnum<(this.numThree2[index].num)){
        this.numThree2[index].select = false;
      } else {
        this.numThree2[index].select = !this.numThree2[index].select;
      }
      if(this.numThree2[index].num=='0') {
        this.numThree2.forEach(element => {
          element.select = false;        
        });
        this.numThree2[0].select=!this.numThree2[0].select;
      } else {
        this.numThree2[0].select=false;
      }
    },
    threeEmpty1() {
      this.numThree1.forEach(element => {
        element.select = false;
      });
    },
    threeEmpty2() {
      this.numThree2.forEach(element => {
        element.select = false;
      });
    },
    allSelect3() {
      if (this.checked3) {
        this.numThree1.forEach(element => {
          element.select = false;
        });
      } else {
        this.numThree1.forEach(element => {
          element.select = true;
        });
      }
    },
    // 四号胆
    fourAcitve1(index) {
      this.numFour1[index].select = !this.numFour1[index].select;
      this.numFour2.forEach(element => {
        element.select = false;        
      });
    },
    fourAcitve2(index) {
      this.dnum = 0;
      this.numFour1.forEach((element,index,arr) => {
        if (element.select) {
          this.dnum++;
        }
      });
      if(this.dnum<(this.numFour2[index].num)){
        this.numFour2[index].select = false;
      } else {
        this.numFour2[index].select = !this.numFour2[index].select;
      }
       if(this.numFour2[index].num=='0') {
        this.numFour2.forEach(element => {
          element.select = false;        
        });
        this.numFour2[0].select=!this.numFour2[0].select;
      } else {
        this.numFour2[0].select=false;
      }
    },
    fourEmpty1() {
      this.numFour1.forEach(element => {
        element.select = false;
      });
    },
    fourEmpty2() {
      this.numFour2.forEach(element => {
        element.select = false;
      });
    },
    allSelect4() {
      if (this.checked4) {
        this.numFour1.forEach(element => {
          element.select = false;
        });
      } else {
        this.numFour1.forEach(element => {
          element.select = true;
        });
      }
    },
    // 五号胆
    fiveAcitve1(index) {
      this.numFive1[index].select = !this.numFive1[index].select;
      this.numFive2.forEach(element => {
        element.select = false;        
      });
    },
    fiveAcitve2(index) {
       this.enum = 0;
      this.numFive1.forEach((element,index,arr) => {
        if (element.select) {
          this.enum++;
        }
      });
      if(this.enum<(this.numFive2[index].num)){
        this.numFive2[index].select = false;
      } else {
        this.numFive2[index].select = !this.numFive2[index].select;
      }
      if(this.numFive2[index].num=='0') {
        this.numFive2.forEach(element => {
          element.select = false;        
        });
        this.numFive2[0].select=!this.numFive2[0].select;
      } else {
        this.numFive2[0].select=false;
      }
    },
    fiveEmpty1() {
      this.numFive1.forEach(element => {
        element.select = false;
      });
    },
    fiveEmpty2() {
      this.numFive2.forEach(element => {
        element.select = false;
      });
    },
    allSelect5() {
      if (this.checked5) {
        this.numFive1.forEach(element => {
          element.select = false;
        });
      } else {
        this.numFive1.forEach(element => {
          element.select = true;
        });
      }
    },
    oushu1(index) {
      this.oushu[index].select = !this.oushu[index].select;
    },
    heshu1(index) {
      this.heshu[index].select = !this.heshu[index].select;
    },
    xiaoshu1(index) {
      this.xiaoshu[index].select = !this.xiaoshu[index].select;
    },
    lianhao1(index) {
      this.lianhao[index].select = !this.lianhao[index].select;
    },
    allEmpty() {
      this.oushu.forEach(element => {
        element.select = false;
      });
      this.heshu.forEach(element => {
        element.select = false;
      });
      this.xiaoshu.forEach(element => {
        element.select = false;
      });
      this.lianhao.forEach(element => {
        element.select = false;
      });
    },
    // 复制号码
    clone_code() {
      const clipboard = new Clipboard(".copy");
      //注意要使用let或者const，不能使用var，否则会出现复制次数叠加的问题，即复制不止一次。因为var是全局变量，let和const是局部
      clipboard.on("success", e => {
        clipboard.destroy(); //使用destroy可以清楚缓存
        this.$bus.$emit("toast", "复制成功");
      });
      clipboard.on("error", e => {
        clipboard.destroy();
        this.$bus.$emit("toast", "复制失败");
      });
    }
  }
};
</script>

<style lang="scss" scoped>
#HelloWorld {
  background-color: #e4f4fa;
  color: #000;
  width: 100vw;
  height: 100%;
  span {
    cursor: pointer;
    margin-left: 10px;
    text-align: center;
    display: inline-block;
    width: 30px;
    height: 30px;
    font-size: 16px;
    border-radius: 50%;
    line-height: 30px;
    border: 1px solid rgb(204, 24, 30);
    box-shadow: 2px 2px 3px #999;
  }
  .active {
    width: 32px;
    height: 32px;
    background-color: #fdd28b;
    // box-shadow: 2px 2px 3px #fddfa3;
    border: none;
    line-height: 32px;
  }
  .lottery {
    width: 100vw;
    height: 100%;
    .center {
      margin: 0 auto;
      width: 1200px;
      // border: 1px solid #fdd;
      .title {
        padding-top: 20px;
        padding-left: 10px;
        text-align: left;
        font-size: 20px;
        font-weight: 700;
        line-height: 40px;
        border-bottom: 1px solid #00a0e9;
      }
      .base {
        margin-top: 0;
        font-weight: 400;
        line-height: 60px;
      }
      .select {
        // margin-top: 10px;
        padding: 10px 0;
        font-size: 20px;
        .box1 {
          cursor: pointer;
          height: 60px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
          }
          .dan {
            margin-right: 10px;
            line-height: 20px;
            padding: 6px;
            background: rgb(204, 24, 30);
            color: #fff;
          }
          .qing {
            margin-left: 20px;
            line-height: 30px;
            padding: 0 10px;
            background: rgb(248, 244, 244);
            border: 1px solid rgb(204, 204, 204);
            border-radius: 4px;
          }
          .all {
            margin-left: 20px;
            display: flex;
            align-items: center;
            input {
              width: 20px;
              height: 20px;
            }
          }
          .chu {
            margin-right: 10px;
          }
          .right {
            margin-left: 60px;
          }
        }
      }
      .double {
        font-size: 20px;
        padding: 20px 10px;
        box-sizing: border-box;
        border-top: 2px solid #00a0e9;
        border-bottom: 2px solid #00a0e9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .shuzi {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .oushu {
            margin-right: 60px;
          }
        }
        .qing {
          cursor: pointer;
          margin-left: 20px;
          line-height: 30px;
          padding: 0 10px;
          background: rgb(248, 244, 244);
          border: 1px solid rgb(204, 204, 204);
          border-radius: 4px;
        }
      }
      .produce {
        line-height: 100px;
        text-align: right;
        button {
          line-height: 50px;
          width: 150px;
          font-size: 20px;
          background: #00a0e9;
          color: #fff;
        }
      }
      .number {
        .title {
          padding: 0 30px 0 10px;
          box-sizing: border-box;
          line-height: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #00a0e9;
          button {
            cursor: pointer;
            line-height: 30px;
            width: 80px;
            font-size: 16px;
            background: #fec06d;
            border-radius: 4px;
          }
        }
        .content {
          width: 1200px;
          height: 300px;
          background: #fff;
          padding: 10px 20px;
          box-sizing: border-box;
          text-align: left;
          font-size: 16px;
          color: #000;
          overflow: scroll;
          p{
            line-height: 20px;
          }
        }
      }
      .prizeNumber {
        // margin-top: 10px;
        span {
          width: 22px;
          height: 22px;
          font-size: 14px;
          border-radius: 50%;
          line-height: 22px;
          color: #fff;
          background-color: rgb(204, 24, 30);
          box-shadow: 82px 30px 27px #CC184E inset,
        }
        font-size: 16px;
        tr {
          background-color: #e9f6fa;
          line-height: 34px;
          border-color:  #fff;
        }
      }
      .tuijian {
        width:100%;
        display:flex;
        justify-content:space-between;
        font-size: 14px;        
        .boxnum {
          width:33.333%;
          text-align:left;
          padding-left:10px;
          background-color: #e9f6fa;
          span {
            width: 22px;
            height: 22px;
            font-size: 14px;
            border-radius: 50%;
            line-height: 22px;
            color: #fff;
            background-color: #fdd28b;
            // box-shadow: 2px 2px 3px #999;
            box-shadow: 82px 30px 27px #CC184E inset,
        }
        }
      }
    }
  }
}
</style>
